<template>
  <el-col :span="span || 6">
    <el-form-item
      :label="label"
      :label-width="labelwidth || '120px'"
      :prop="prop"
      :class="searchFrom ? 'searchFrom2' : ''"
    >
      <BaseInput
        :type="type"
        :rows="rows"
        :value="value"
        :disabled="disabled"
        :placeholder="phTxt"
        @input="onInput"
      />
    </el-form-item>
  </el-col>
</template>

<script lang="ts">
import { Component, Prop, Vue, Model, Emit } from "vue-property-decorator";
// other
import BaseInput from "./BaseInput.vue";

@Component({
  name: "BaseFormInput",
  components: {
    BaseInput,
  },
})
export default class BaseFormInput extends Vue {
  @Prop({ type: Number, default: 3 }) rows?: number;
  @Prop(String) prop?: string;
  @Prop(String) label?: string;
  @Prop(Number) span?: number;
  @Prop(String) type?: string;
  @Prop(String) ph?: string;
  @Prop(Boolean) disabled?: boolean;
  @Model("change") value?: string;
  @Prop(Boolean) searchFrom?: boolean;
  @Prop({ type: String, default: "120px" }) labelwidth!: string;
  @Emit("change")
  onInput(val: string) {
    return val;
  }
  get phTxt() {
    const { ph, label } = this;
    return ph || `请输入${label}`;
  }
}
</script>

<style lang="scss" scope>
.searchFrom2 {
  display: flex !important;
  .el-form-item__label-wrap {
    flex: 0 0 4.3em;
  }
  .el-input--medium {
    width: 100%;
    padding-right: 15px;
  }
}
</style>
